<script setup lang="ts">
const open=(type:any)=>{
// 确保在浏览器环境中执行
  if (typeof window !== 'undefined') {
    // 打开一个新的浏览器标签页或窗口
    window.open(import.meta.env[type], '_blank');
  }
}

</script>

<template>
<!--  contenteditable="true"-->
  <div class="header"><h1  class="h1-font"  >统一运维平台</h1></div>

  <div class="center">
    <div class="right">

      <div class="link isactive  margin-right"  @click="open('VITE_API_ALARM_URL')">

        <div class="link_name">
          <img  src="../assets/images/main/footer/faeLink/menu9.png" alt=""/>
          <span>
            监测告警
          </span>
        </div>
      </div>
      <div class="link isactive  margin-right2"  @click="open('VITE_API_DATA_URL')" >

        <div class="link_name">
          <img  src="../assets/images/main/footer/faeLink/menui.png" alt=""/>
          <span>
            数据分析
          </span>
        </div>
      </div>

    </div>
    <div class="left">
      <div class="link isactive  margin-left"    @click="open('VITE_API_QUALITY_URL')">

        <div class="link_name">
          <img  src="../assets/images/main/footer/faeLink/menu.png"  alt=""/>
          <span>
           质量监测
          </span>
        </div>
      </div>
      <div class="link isactive  margin-left2"    @click="open('VITE_API_CERT_URL')">

        <div class="link_name">
          <img  src="../assets/images/main/footer/faeLink/menu8.png"  alt=""/>
          <span>
            证书管理
          </span>
        </div>
      </div>
    </div>
  </div>


</template>

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
.header{
  //background:url("@/assets/images/header/bottom_bg@2x.png");
  background-size: contain;
  @include  hHeight(20);
  width: 100%;
}
.h1-font{
  font-weight: 400;
  background: linear-gradient(180deg, #FFFFFF 40%, #fff 60%, #136adc 100%);
  margin-right: 0.52083vw;
  font-family: PangMenZhengDao-3;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  @include FontSize(60);
  @include LetterSpacing(2);
  text-shadow: 0 2px 4px rgb(136 176 207 / 50%);
  outline: none;
  //-webkit-box-reflect: below 1px  linear-gradient(transparent, #136adc);
  animation: animate 5s linear infinite;
}
@keyframes animate  {

  32%,66%,96%{
    color: #fff;
    text-shadow: 0 0 10px rgb(255, 255, 255,0.5),
    0 0 20px rgb(136 ,176 ,207,0.5),
    0 0 20px rgb(55, 51, 213,0.5),
    0 0 20px rgb(55, 51, 213,0.5);
  }
0%,20%,30%,50%,60%,80%,90%,100%{
    background: linear-gradient(180deg, #FFFFFF 40%, #fff 60%, #136adc 100%);
    text-shadow: 0 2px 4px rgb(136 176 207 / 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.center{
  @include  hHeight(100);
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  position: relative;
  .right{
    @include wHeight(600);
    flex: 1;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }
  .left{
    @include wHeight(600);
    flex: 1;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }

  .link {
    @include Width(280);
    @include wHeight(220);
    @include Margin(1, 16, 0, 0);
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    @include FontSize(18);
    transition: all 0.5s;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: url('@/assets/images/main/footer/faeLink/group10.png');
    background-size: contain;
    .link-img {
      width: 100%;
      position: relative;
      transition: all 0.3s;
      height: 100%;
      display: flex;
      justify-content: center;
      //bottom: 0;

      img {
        @include Width(129);
        @include wHeight(110);
        // transition: all 0.3s;
        position: absolute;
        bottom: 0;
        // transform: translate(0, -90%);
      }

    }


    &.isactive {
      @include LetterSpacing(1);

      .link-img {
        width: 100%;
        position: relative;
        transition: all 0.3s;
        height: 100%;
        display: flex;
        justify-content: center;
        //bottom: 0;

        img {
          @include Width(240);
          @include wHeight(140);
          // transition: all 0.3s;
          position: absolute;
          @include Bottom(0);
          // transform: translate(0, -90%);
        }
      }
    }
  }


  .link:hover {
    .link_name{
      span{
        background: linear-gradient(180deg, #96d9a2 40%, #23e50e 60%, #58c5a9 100%);
        -webkit-background-clip: text;
        text-shadow: 2px 2px 10px rgb(151 183 209 / 90%);
      }

    }
  }
  .margin-left{
    @include MarginLeft(200);
  }
  .margin-left2{
    @include MarginLeft(320);
  }
  .margin-right{
    @include MarginRight(200);
  }
  .margin-right2{
    @include MarginRight(320);
  }
  .link_name {

    display: flex;
    width: 100%;
    height: auto;
    // @include Width(72);
    // @include wHeight(35);
    text-align: center;
    font-family: PangMenZhengDao-3;
    @include LetterSpacing(1);
    font-weight: 500;
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translate(-50%,-70%);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
    color: rgba(149, 202, 255, 1);
    font-family: Regular;
    font-weight: 600;
    @include FontSize(30);
    text-shadow: 0 1.33px 2.67px #000101;
    @include PaddingTop(35);
    span{
      background: linear-gradient(180deg, #FFFFFF 40%, #fff 60%, #136adc 100%);
      font-family: PangMenZhengDao-3;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      @include LetterSpacing(1);
      text-shadow: 0 2px 4px rgb(136 176 207 / 50%);
    }
    img {
      @include Width(42);
      @include wHeight(45);
      @include MarginRight(20);
      @include MarginLeft(10);
    }
  }
}
</style>
